<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../double.css" />
		<link rel="stylesheet" type="text/css" href="me.css" />
		<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="me_order">
			<div class="select-list">
				<ul class="clearfix">
					<li class="fl over">全部</li>
					<li class="fl">待付款</li>
					<li class="fl">已完成</li>
				</ul>
			</div>
			<div class="content-list">
				<ul>
					<li class="over all">
						<div class="list">
							<div class="title">
								<h2>易知学社 ></h2>
								<span>待付款</span>
							</div>
							<div class="clearfix center">
								<div class="fl left">
									<img src="../../img/image04_course2x.png">
								</div>
								<div class="fr right">
									<div class="">
										<h3>初九易术应用</h3>
										<p>独创“三字易经导航图”加故事化呈现方式让任何人都...</p>
									</div>
									<p class="i">需付款：<i>￥</i><i class="num">398.00 </i></p>
								</div>
							</div>	
							<div class="button clearfix">
								<button type="button" class="fr color">付款</button>
								<button type="button" class="fr">取消订单</button>
							</div>
						</div>
						<div class="list">
							<div class="title">
								<h2>易知学社 ></h2>
								<span>已完成</span>
							</div>
							<div class="clearfix center">
								<div class="fl left">
									<img src="../../img/image04_course2x.png">
								</div>
								<div class="fr right">
									<div class="">
										<h3>初九易术应用</h3>
										<p>独创“三字易经导航图”加故事化呈现方式让任何人都...</p>
									</div>
									<p class="i">需付款：<i>￥</i><i class="num">398.00 </i></p>
								</div>
							</div>	
							<div class="button clearfix">
								<button type="button" class="fr">查看订单</button>
							</div>
						</div>
					</li>
					<li class="payment">
						2
					</li>
					<li class="completed">
						3
					</li>
				</ul>
			</div>
		 </div>
		<script type="text/javascript">
			$(function() {
				$('.select-list li').click(function() {
					$(this).addClass('over').siblings('li').removeClass('over');
					$('.content-list li').removeClass('over').eq($(this).index()).addClass('over');
				})
			})
		</script>
	</body>
</html>
